<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 700px;
				height: 450px;
				border: dashed black;
				/* border-width: 10px; */
				margin: 0 auto;
				background-image: url(../img/猫猫.jpg),url(../img/猫猫.jpg),url(../img/猫猫.jpg),url(../img/猫猫.jpg),url(img/猫猫.jpg);
				background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
				background-position: top left,top right,bottom left,bottom right,center center;
				background-size: 100px;
			}
			
			
			.card{
				border: 1px solid #ccc;
				padding: 10px;
				height: 550px;
				width: 420px;
			}
			.bigToSmall{
				margin-top: 100px;
				background-image: url(../img/猫猫.jpg),url(../img/猫猫.jpg),url(../img/猫猫.jpg);
				background-position: 0 0px, 45px 55px, 90px 100px;
				background-size: 250px 430px;
				background-repeat: no-repeat;
				-moz-background-origin: content-box;
				-webkit-background-origin: content-box;
				-o-background-origin: content-box;
				background-origin: content-box;
			}
			
			
			table{
				/* border-collapse: collapse; */
			}
			td{
				width: 60px;
				height: 30px;
				border: 1px solid red;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div class="card bigToSmall"></div>
		<table>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>